<template>
  <div class="transition">
    <Echart
        :options="options"
        id="centreLeft1Chart"
        height="244px"
        width="472px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import { isNotEmpty } from '@/utils'

export default {
  data() {
    return {
      options: {},
    }
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        if (!isNotEmpty(newData)) return
        this.getData(newData)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getData(data) {
      const {xData, seriesData} = data

      this.options = {
        // color: lineColor,
        textStyle: {
          fontSize: 10,
          color: '#A7C5D9'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#083264',
          textStyle: {
            fontFamily: 'PingFang SC, PingFang SC',
            fontWeight: '500',
            fontSize: 11,
            color: '#fff',
            borderColor: '#041432'
          },
        },
        grid: {
          top: '20px',    // 调整上边距，根据需要修改
          bottom: '12px', // 调整下边距，根据需要修改
          height: '187px' // 固定图表区域高度
        },
        // legend: {
        //   data: ['滨间所', '渔阳所', '兴谷所', '金海湖所'],
        //   top: 12,
        //   textStyle: {
        //     fontSize: 10,
        //     color: '#A7C5D9'
        //   },
        //   itemWidth: 10,
        //   itemHeight: 4
        // },
        xAxis: {
          type: 'category',
          data: xData,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              fontFamily: 'PingFang SC, PingFang SC',
              fontWeight: '500',
              fontSize: 11,
              color: '#A7C5D9'
            }
          }
        },
        series: [
          ...seriesData,
          // 辅助系列，用于绘制顶部和底部虚线，不参与 tooltip
          {
            name: '辅助线',
            type: 'line',
            data: [],
            markLine: {
              silent: true,
              symbol: 'none',
              lineStyle: {
                type: 'dashed',
                color: '#aaa'
              },
              data: [
                // 顶部虚线：横跨整个 X 轴，位于 Y 值 100 处
                [{xAxis: xData[0], yAxis: 100}, {xAxis: xData[xData.length - 1], yAxis: 100}],
                // 底部虚线：横跨整个 X 轴，位于 Y 值 50 处
                [{xAxis: xData[0], yAxis: 50}, {xAxis: xData[xData.length - 1], yAxis: 50}]
              ]
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
